<template>
    <header class="component-box">
        <h2>
            <img :src="src" />
            <span>{{ title }}</span>
        </h2>
    </header>
</template>

<script setup lang="ts">
// 定义父传子的参数
defineProps({
    // 标题
    title: {
        type: String,
        default: "校园新闻"
    },
    // 图片路径
    src: {
        type: String,
        default: "https://www.scvtc.edu.cn/images/tit-icon1.png"
    }
})
</script>

<style scoped lang="scss">
.component-box {
    display: flex;
    justify-content: center;

    h2 {
        position: relative;
        padding: 0px 20px;
        display: flex;
        align-items: center;

        &::after {
            content: "";
            position: absolute;
            top: 50%;
            width: 1300px;
            left: 100%;
            height: 1px;
            background: #efefef;
        }

        &::before {
            content: "";
            position: absolute;
            top: 50%;
            width: 1300px;
            right: 100%;
            height: 1px;
            background: #efefef;
        }

        img {
            margin-right: 10px;
        }
    }


}
</style>